<template>
  <div class="bot4">
    <div class="headerMaintitle">
      <img class="topPic" src="../assets/rightBottom3.png" alt="" />
      <div class="headerText">标题1</div>
    </div>
    <div class="warn">
      <div>
        <span>紧急工单</span>
        <div>{{ appealList.normal }}</div>
      </div>
      <div>
        <span>重复工单</span>
        <div>{{ appealList.warn }}</div>
      </div>
      <div>
        <span>一般工单</span>
        <div>{{ appealList.warn }}</div>
      </div>
    </div>
    <div id="bot3chart" class="bot3chart"></div>
    <div class="group">
      <div
        v-for="(item, index) in pieData"
        :key="index"
        class="item"
        :style="{ '--color': `${colorList[index]}` }"
      >
        <div class="item-point"></div>
        <div class="item-content">
          <div class="item-text">{{ item.text }}</div>
          <div class="item-value">{{ item.value }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      appealList: {
        normal: 0,
        warn: 0,
        transact: 0,
        end: 0,
      },
      pieData: [
        { text: "处理中", value: 1 },
        { text: "待审批", value: 2 },
        { text: "已审批", value: 3 },
      ],

      colorList: [
        "linear-gradient(180deg, #00FEFF, #00D1D2)",
        "linear-gradient(180deg, #FAF516, #FA4A11)",
        "linear-gradient(180deg, #27D3FF, #2A7CF6)",
      ],
      streetId: 0,
    };
  },
  beforeDestroy() {},
  mounted() {
    this.init();
  },
  methods: {
    init() {
      const pie = this.$echarts.init(document.getElementById("bot3chart"));
      const option = {
        graphic: [
          {
            type: "text",
            style: {
              text: "工单总数",
              textAlign: "center",
              fill: "#ffffff",
              fontSize: 20,
            },
            left: "center",
            top: "60%",
          },
          {
            type: "text",
            style: {
              text: "6",
              textAlign: "center",
              fill: "#00F8FD",
              fontSize: 35,
            },
            left: "center",
            top: "37%",
          },
        ],
        color: [
          {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#00FEFF", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#00D1D2", // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
          {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#FAF516", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#FA4A11", // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
          {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#27D3FF", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#2A7CF6", // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        ],
        series: [
          {
            type: "pie",
            radius: ["62%", "90%"],
            center: ["50%", "50%"],
            itemStyle: {
              borderRadius: 10,
              borderWidth: 2,
            },
            data: this.pieData,
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
          },
          {
            // 内部实线
            type: "pie",
            radius: ["55%", "55%"],
            center: ["50%", "50%"],
            data: [{ value: 1 }],
            itemStyle: {
              borderColor: "#2A7CF6",
              borderWidth: 2,
            },
            silent: true,
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
          },
        ],
      };
      pie.setOption(option);
    },
  },
};
</script>

<style lang="less" scoped>
.warn {
  margin: 23px 10px 40px;
  height: 98px;
  display: flex;
  & > div {
    height: 100%;
    margin-right: 12px;
    background-image: url("../assets/leftWarn.png");
    background-size: 100% 100%;
    flex: 1;
    display: flex;
    color: #ffffff;
    align-items: center;
    justify-content: center;
    span {
      font-size: 20px;
      margin-left: 12px;
      margin-right: 38px;
    }
    div {
      font-weight: bold;
      font-size: 28px;
    }
  }
  & > div:last-child {
    margin-left: 12px;
    margin-right: 0;
  }
}
.bot3chart {
  margin: 0 auto;
  margin-left: 70px;
  width: 255px;
  height: 255px;
}
.group {
  margin-top: -222px;
  margin-left: 380px;
  height: 189px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .item {
    display: flex;
    align-items: baseline;

    .item-point {
      background: var(--color);
      width: 17px;
      height: 17px;
      border-radius: 50%;
    }

    .item-content {
      margin-left: 12px;
      display: flex;
      align-items: center;
      // flex-direction: column;

      .item-text {
        color: #ffffff;
        font-size: 24px;
        text-align: left;
      }

      .item-value {
        margin-left: 60px;
        background: var(--color);
        -webkit-background-clip: text;
        color: transparent;
        font-size: 28px;
        font-weight: 600;
        text-align: left;
      }
    }
  }
}
</style>
